<template>
  <div>
    <a-list :bordered="false" size="small" :max-height="300" hoverable @reach-bottom="getMoreList">
      <!-- empty -->
      <template #empty>
        <div style="padding: 60px 0 100px">
          <a-empty style="display: block" />
        </div>
      </template>
      <!-- loading -->
      <template #scroll-loading v-if="list.length">
        <div v-if="noMoreData">没有更多数据了</div>
        <a-spin v-else />
      </template>
      <!-- item -->
      <a-list-item v-for="(item, index) of list" :key="index" @click="openDetailModal(item)">
        <template #actions>
          <span class="tag">未读</span>
        </template>
        <a-list-item-meta :title="item.title">
          <template #description>
            <span v-if="item.noticeType == 2" class="tag1">【{{ item.typeName }}】</span>
            {{ item.sendTime }}
          </template>
        </a-list-item-meta>
      </a-list-item>
    </a-list>

    <div class="readall-btn">
      <span class="link" v-permission="viewAll_permission" @click="hanldeViewAll"> 查看全部</span>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, inject, onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { getMsgList, readMsg } from '@/api/common'
  import useUserStore from '@/store/modules/user'

  export default defineComponent({
    name: 'MessageList',
    props: {
      //  1业务通知，2系统消息
      msgType: [Number, String],
    },
    setup(props) {
      const router = useRouter()
      const userStore = useUserStore()
      const viewAll_permission =
        props.msgType == 1 ? 'svms:business:message:business-notice-record' : 'svms:business:message:system-message'

      const queryParams = {
        pageNumber: 1,
        pageSize: 10,
        noticeType: props.msgType,
        userStatus: 0,
      }

      const list = ref([])
      const noMoreData = ref(false)
      const getList = () => {
        if (noMoreData.value) return
        getMsgList(queryParams).then((res: any) => {
          if (res.code == 200) {
            const { pageSize, pageNumber, total, data } = res.result
            list.value.push(...data)
            if ((pageSize + 1) * pageNumber > total) {
              noMoreData.value = true
            }
          }
        })
      }

      // 获取更多数据
      const getMoreList = () => {
        getList()
        queryParams.pageNumber++
      }

      // 清空数据
      const clearMsg = (updateMsg = true) => {
        queryParams.pageNumber = 1
        noMoreData.value = false
        list.value = []
        updateMsg && userStore.updateUnreadMsgCount()
      }

      // open消息详情
      const messageModalRef = inject('messageModalRef') as any
      const sysMessageModalRef = inject('sysMessageModalRef') as any
      const openDetailModal = (record: any) => {
        if (props.msgType == 1) {
          messageModalRef.value.open(record.id)
        } else {
          sysMessageModalRef.value.open(record, 'unread')
        }
        // 重置列表（清空并获取消息列表）
        clearMsg()
        getList()
      }

      const readAllMsg = () => {
        let idList = list.value.map((i) => i.id)
        readMsg({ idList: idList }).then((res: any) => {
          if (res.code == 200) {
            // 刷新列表（清空并获取消息列表）
            clearMsg()
            getList()
          }
        })
      }

      // 查看全部
      const hanldeViewAll = () => {
        if (list.value && list.value.length > 0) {
          readAllMsg()
        }
        let path = '/business/message/business-notice-record'
        if (props.msgType == 2) {
          path = '/business/message/system-message'
        }
        router.push(path)
      }

      onMounted(() => {
        var parentElement = document.querySelector('.sys-message-content')
        var div = document.createElement('div')
        div.className = 'sys-msg-divider'
        parentElement?.append(div)
      })

      return {
        viewAll_permission,
        userStore,
        noMoreData,
        list,
        clearMsg,
        getMoreList,
        openDetailModal,
        hanldeViewAll,
      }
    },
  })
</script>

<style>
  .arco-overlay-notification .arco-notification-footer {
    margin-top: 0;
  }
  .notice_icon {
    height: 16px;
    width: 16px;
    transform: translateY(2px);
    margin-right: 8px;
  }
  .notice_cont {
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
    line-height: 22px;
  }
  .sys-msg-divider {
    height: 1px;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    background: #f2f3f5;
  }
</style>
<style lang="less" scoped>
  :deep(.arco-list-item) {
    padding: 8px;
    cursor: pointer;
  }
  :deep(.arco-list-item-action) {
    align-self: auto;
    padding-top: 4px;
  }
  :deep(.arco-notification-footer) {
    margin-top: 0;
  }
  .tag {
    color: #165dff;
  }
  .tag1 {
    color: #1890ff;
  }

  .readall-btn {
    height: 30px;
    line-height: 40px;
    font-weight: 400;
    font-size: 14px;
    color: #1890ff;
    text-align: center;
    cursor: pointer;
    &:hover {
      color: #165dff;
    }
  }
</style>
